<!-- 到货通知单弹框 -->
<script lang="ts" setup>
import type { ArrivalNoticeLine } from '#/api';

import { computed, ref, watch } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button, Input, InputSearch } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { addArrivalNoticeLine, updateArrivalNoticeLine } from '#/api';
import MaterialProduct from '#/utils/view/material/materialproductmodal.vue';

import { useMaterialScheam } from './data';

const emit = defineEmits(['success']);
const searchItemCode = ref('');
const searchItemName = ref('');
const searchUnitName = ref('');
const searchSpecification = ref('');

const formData = ref<ArrivalNoticeLine.Row>();
const showConfrimBtn = ref(true);
const title = ref<string>('');
const getTitle = computed(() => {
  return formData.value?.attr1 === '2'
    ? '编辑到货通知单信息'
    : '新增到货通知单信息';
});
watch(getTitle, (newTitle) => {
  title.value = newTitle;
});

const [Form, formApi] = useVbenForm({
  wrapperClass: 'grid grid-cols-12',
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: useMaterialScheam(),
  showDefaultActions: false,
});

const [Modal, modalApi] = useVbenModal({
  class: 'w-[600px]',
  closeOnClickModal: false,
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (valid) {
      modalApi.lock();

      let data;
      await formApi.getValues().then((res) => {
        data = res;
      });
      try {
        await (formData.value?.lineId
          ? updateArrivalNoticeLine(data!)
          : addArrivalNoticeLine(data!));
        modalApi.close();
        emit('success', formData.value?.lineId ? '修改成功' : '新增成功');
      } finally {
        modalApi.lock(false);
      }
    }
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = modalApi.getData<ArrivalNoticeLine.Row>();
      if (data) {
        formData.value = data;
        formApi.setValues(formData.value);
        showConfrimBtn.value = formData.value?.attr1 !== '1';
        searchItemCode.value = data?.itemCode;
        searchItemName.value = data?.itemName;
        searchUnitName.value = data?.unitName!;
        searchSpecification.value = data?.specification!;
        modalApi.setState({
          showConfirmButton: showConfrimBtn.value,
        });
      }
    }
  },
});

function resetForm() {
  formApi.resetForm();
  formApi.setValues({});
}

// 物料产品搜索子弹框
const [MaterialProductModal, materialProductModalApi] = useVbenModal({
  connectedComponent: MaterialProduct,
  onClosed() {
    searchItemCode.value = materialProductModalApi.getData().itemCode;
    searchItemName.value = materialProductModalApi.getData().itemName;
    searchUnitName.value = materialProductModalApi.getData().unitName;
    searchSpecification.value = materialProductModalApi.getData().specification;
    formApi.setFieldValue(
      'itemCode',
      materialProductModalApi.getData().itemCode,
    );
    formApi.setFieldValue('itemId', materialProductModalApi.getData().itemId);
    formApi.setFieldValue(
      'itemName',
      materialProductModalApi.getData().itemName,
    );
    formApi.setFieldValue(
      'unitName',
      materialProductModalApi.getData().unitName,
    );
    formApi.setFieldValue(
      'specification',
      materialProductModalApi.getData().specification,
    );
    formApi.setFieldValue('noticeId', modalApi.getData().noticeId);
  },
});
</script>

<template>
  <Modal :title="getTitle">
    <Form class="mx-4">
      <template #itemCode>
        <InputSearch
          readonly
          placeholder="请选择物料编码"
          @search="materialProductModalApi.open()"
          v-model:value="searchItemCode"
        />
      </template>
      <template #itemName>
        <Input
          placeholder="请输入物料名称"
          v-model:value="searchItemName"
          readonly
        />
      </template>
      <template #specification>
        <Input
          placeholder="请输入规格"
          v-model:value="searchSpecification"
          readonly
        />
      </template>
      <template #unitName>
        <Input
          placeholder="请输入单位"
          v-model:value="searchUnitName"
          readonly
        />
      </template>
    </Form>
    <template #prepend-footer>
      <div class="flex-auto" v-if="showConfrimBtn">
        <Button type="primary" danger @click="resetForm"> 重置 </Button>
      </div>
    </template>
  </Modal>
  <MaterialProductModal />
</template>
